<!-- 顶部通栏组件 src/components/XtxTopNav.vue -->
<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";
import { useToggle } from "@vueuse/shared";
import { isDark } from "@/utils/isDark";
import { useUserStore } from "@/stores/userStore";
import { UserAPI } from "@/api/UserAPI";
import { ElMessage } from "element-plus";

function toggle() {
  useToggle(isDark)();
}

//获取浏览器滚动高度
const { y: scrollTop } = useWindowScroll();
const route = useRoute();

//引入路由
const router = useRouter();
//导入用户store
const useStroe = useUserStore();
//获取用户信息状态
const { userinfo } = storeToRefs(useStroe);
async function handleCommand(command: string) {
  if (command == "a") {
    router.push({
      path: "/backend",
    });
  } else if (command == "b") {
    router.push({
      path: "/backend/userActions",
    });
  } else if (command == "c") {
    router.push({
      path: "/backend/add_article",
    });
  } else if (command == "d") {
    router.push({
      path: "/backend/covers",
    });
  } else if (command == "e") {
    router.push({
      path: "/backend/MessageBoard",
    });
  } else if (command == "logout") {
    // 清除用户信息
    useStroe.$reset();
    ElMessage({
      showClose: true,
      message: "退出登录成功",
      type: "success",
    });
    //跳转首页
    router.push("/");
  }
}
//跳转登录注册页面
function LoginSing(url: string) {
  //跳转到login路由，并把目标路由的url路径保存在login的query中
  router.replace({
    path: url,
    query: {
      return: router.currentRoute.value.fullPath, // router对象自带的属性
    },
  });
}
//搜索数据
const search_key = ref("");
//定义搜索框
const search = ref();
function searche() {
  if (!search.value.classList.contains("show_search")) {
    search.value.classList.add("show_search");
  } else {
    if (!search_key.value) {
      search.value.classList.remove("show_search");
    } else {
      const routeUrl = router.resolve({
        path: `/search/${search_key.value}`,
      });
      search_key.value = "";
      window.open(routeUrl.href, "_blank");
    }
  }
}
</script>
<template>
  <div>
    <nav :class="{ show: scrollTop > 500 || route.path === '/search' }">
      <div class="left">
        <router-link to="/" exact-active-class="exact-active">首页</router-link>
        <router-link to="/news" exact-active-class="exact-active"
          >新闻</router-link
        >
        <router-link to="/archives" exact-active-class="exact-active"
          >回忆录</router-link
        >
        <router-link to="/navigation" exact-active-class="exact-active"
          >网站导航
        </router-link>
        <router-link to="/search" exact-active-class="exact-active"
          >网站搜索
        </router-link>
        <div class="search" ref="search">
          <input
            type="text"
            v-model.trim="search_key"
            @keyup.enter="searche"
            class="search_box"
          />
          <button @click="searche"><i class="fa fa-search"></i></button>
        </div>
      </div>
      <div class="right">
        <img
          @click="toggle()"
          v-if="isDark"
          src="@/assets/img/dark.svg"
          alt=""
        />
        <img v-else @click="toggle()" src="@/assets/img/light.svg" alt="" />
        <el-dropdown
          v-if="userinfo.status === 'success'"
          @command="handleCommand"
        >
          <span class="usename">
            {{ userinfo.result.username }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">个人中心</el-dropdown-item>
              <el-dropdown-item command="b">头像列表</el-dropdown-item>
              <el-dropdown-item v-if="userinfo.result.is_superuser" command="c"
                >发布文章</el-dropdown-item
              >
              <el-dropdown-item command="d">封面列表</el-dropdown-item>
              <el-dropdown-item command="e">留言板</el-dropdown-item>
              <el-dropdown-item command="logout"> 注销退出 </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div v-else>
          <a href="javascript:" @click="LoginSing('/login')">登录</a>
          <a href="javascript:" @click="LoginSing('/sign')">注册</a>
        </div>
      </div>
    </nav>
  </div>
</template>
<style scoped lang="scss">
nav {
  width: calc(100% - 240px);
  height: 60px;
  background-color: transparent;
  display: flex;
  align-items: center;
  padding: 0 120px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all 0.6s;
  &.show {
    background-color: var(--el-bg-color);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    a {
      color: var(--el-text-color-primary) !important;
    }
  }
  .left {
    width: 60%;

    .exact-active {
      color: #409eff !important;
    }
  }
  .right {
    width: 40%;
    display: flex;
    justify-content: right;
    .usename {
      color: var(--el-color-primary);
    }
    img {
      width: 20px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  a {
    margin-right: 20px;
    color: var(--el-bg-color);
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
